import React, { PureComponent } from "react"

import {Tabs}from "antd"
const TabPane = Tabs.TabPane;
import { getElement } from "./elements"

export default class Content extends PureComponent {
  state = {
    Nodes: []
  }
  render() {
    const { activeKey, tabsChange, removeTab } = this.props
    return (
      <Tabs
        hideAdd
        activeKey={activeKey}
        onChange={tabsChange}
        type="editable-card"
        onEdit={removeTab}
      >
        {this.state.Nodes}
      </Tabs>
    )
  }
  renderTab = async (config) => {
    const { updateTbsConfig, removeTab } = this.props
    let Nodes = []
    for (let [, v] of Object.entries(config)) {
      const { type, title, key } = v,
        Node = await getElement(type)
      Nodes.push(
        <TabPane
          tab={title} key={key}>
          <Node
            info={v} params={v.params} updateTbsConfig={updateTbsConfig} removeTab={removeTab}/>
        </TabPane>
      )
    }
    this.setState({
      Nodes
    })
  }
  componentWillReceiveProps({ config }) {
    if (config !== this.props.config) {
      this.renderTab(config)
    }
  }
  componentDidMount() {
    const { config } = this.props
    this.renderTab(config)
  }
}